<template>
  <view class="asset-seek">
    <z-paging ref="paging" @query="queryList" v-model="dataList">
      <template #top>
        <view class="search-bar">
          <up-search
              v-model="name"
              placeholder="请输入资产名称/编码"
              shape="square"
              clearable
              :show-action="false"
              @search="handleConfirm"
              @change="handleConfirm"
          />
        </view>
      </template>
      <assetSeek :data-list="dataList"/>
    </z-paging>
  </view>
</template>

<script setup>
import {ref} from 'vue'
import request from "@/api/request";
import {debounce} from "lodash-es";
import assetSeek from '@/components/assetSeek/index'

const name = ref('')
const paging = ref(null)
const dataList = ref([])

const handleConfirm = debounce(async () => {
  if (paging.value) {
    paging.value.reload();
  }
}, 1000);

const queryList = (pageNo, pageSize) => {
  uni.showLoading({
    title: '加载中...',
    mask: true
  })
  let data = {
    code: "getAssetList",
    allColumnFilter: true,
    filters: [
      {
        name: 'name',
        value: name.value
      }
    ],
    pageInput: {currentPage: pageNo, pageSize: pageSize},
    permissionKey: "",
  }
  request.post('/api/module/GetViewTable', data).then(res => {
    if (res.code && res.isSuccess) {
      paging.value.complete(res.result.viewTable)
      uni.hideLoading()
    } else {
      uni.showToast({title: res.error, duration: 1500, icon: "error"});
      uni.hideLoading();
    }
  }).catch(err => {
    uni.hideLoading()
    console.error(err)
  })
}

</script>

<style scoped lang="scss">
.asset-seek {
  background-color: #f5f5f5;
  min-height: calc(100vh - var(--window-top, 0px));

  .search-bar {
    display: flex;
    align-items: center;
    gap: 20rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 20rpx;
    border-bottom: 1rpx solid #f5f5f5;
  }


}
</style>